<%--
  Created by IntelliJ IDEA.
  User: BOMING
  Date: 2025-7-7
  Time: 23:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>WebSocket进度条演示</title>
    <style>
        #progress-container {
            width: 300px;
            margin: 50px auto;
        }
        #progress-bar {
            height: 30px;
            background-color: #4CAF50;
            width: 0%;
            text-align: center;
            line-height: 30px;
            color: white;
            transition: width 0.5s;
        }
        #progress-text {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="progress-container">
    <div id="progress-bar">0%</div>
    <div id="progress-text">连接状态: 未连接</div>
</div>

<script>
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');

    // 创建WebSocket连接
    const socket = new WebSocket('ws://' + window.location.host + '/webdemo/progress');

    // 连接建立时
    socket.onopen = function(event) {
        progressText.textContent = '连接状态: 已连接';
        console.log('WebSocket连接已建立');
    };

    // 接收消息时
    socket.onmessage = function(event) {
        const progress = event.data;
        progressBar.style.width = progress + '%';
        progressBar.textContent = progress + '%';
        console.log('收到进度更新: ' + progress + '%');
    };

    // 连接关闭时
    socket.onclose = function(event) {
        progressText.textContent = '连接状态: 已断开';
        console.log('WebSocket连接已关闭');
    };

    // 发生错误时
    socket.onerror = function(error) {
        progressText.textContent = '连接状态: 错误';
        console.error('WebSocket错误:', error);
    };
</script>
</body>
</html>
